<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href='css/base.css'/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="box">
    <!-- 头部-->
    <div class="header">
        <div class="header-in">
            <a href="#" class="icon-logo"></a>

            <form action="#">
                <span class="icon-sou"></span>
                <input type="search" name="search" placeholder="请输入宝贝名字"/>
            </form>
            <a href="#" class="dengLu">登录</a>
        </div>
    </div>
    <!-- banner-->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!-- 导航-->
    <div class="nav">
        <ul class="clearfix">
            <li><a href="#"><img src="images/nav0.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav1.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav2.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav3.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav4.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav5.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav6.png" alt=""/></a>

                <p>商品分类</p></li>
            <li><a href="#"><img src="images/nav7.png" alt=""/></a>

                <p>商品分类</p></li>
        </ul>
    </div>
    <!-- 内容-->
    <div class="jd-section">
        <div class="section">
            <!-- 秒杀上面部分-->
            <div class="section-top clearfix">
                <span class="pull-left sk"></span>
                <span class="pull-left sb">OK秒杀</span>

                <div class="shijian">
                    <span></span>
                    <span></span>
                    <span>:</span>
                    <span></span>
                    <span></span>
                    <span>:</span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#" class="pull-right">更多></a>
            </div>
            <!-- 秒杀下面部分-->
            <div class="section-bottom">
                <ul class="clearfix">
                    <li><a href="#"><img src="images/detail01.jpg" alt=""/></a>

                        <p>¥10</p>

                        <p>¥1000</p>
                    </li>
                    <li><a href="#"><img src="images/detail02.jpg" alt=""/></a>

                        <p>¥10</p>

                        <p>¥1000</p>
                    </li>
                    <li><a href="#"><img src="images/detail01.jpg" alt=""/></a>

                        <p>¥10</p>

                        <p>¥1000</p>
                    </li>


                </ul>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-left b-r"><img src="images/cp1.jpg" alt=""/></a>
                <a href="#" class="pull-right b-b"><img src="images/cp2.jpg" alt=""/></a>
                <a href="#" class="pull-right"><img src="images/cp3.jpg" alt=""/></a>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-right b-l"><img src="images/cp4.jpg" alt=""/></a>
                <a href="#" class="pull-left b-b"><img src="images/cp5.jpg" alt=""/></a>
                <a href="#" class="pull-left"><img src="images/cp6.jpg" alt=""/></a>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-left b-r"><img src="images/cp1.jpg" alt=""/></a>
                <a href="#" class="pull-right b-b"><img src="images/cp2.jpg" alt=""/></a>
                <a href="#" class="pull-right"><img src="images/cp3.jpg" alt=""/></a>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-right b-l"><img src="images/cp4.jpg" alt=""/></a>
                <a href="#" class="pull-left b-b"><img src="images/cp5.jpg" alt=""/></a>
                <a href="#" class="pull-left"><img src="images/cp6.jpg" alt=""/></a>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-left b-r"><img src="images/cp1.jpg" alt=""/></a>
                <a href="#" class="pull-right b-b"><img src="images/cp2.jpg" alt=""/></a>
                <a href="#" class="pull-right"><img src="images/cp3.jpg" alt=""/></a>
            </div>
        </div>
        <div class="section">
            <div class="title">
                <h3>京东超市</h3>
            </div>
            <div class="section-ct clearfix">
                <a href="#" class="pull-right b-l"><img src="images/cp4.jpg" alt=""/></a>
                <a href="#" class="pull-left b-b"><img src="images/cp5.jpg" alt=""/></a>
                <a href="#" class="pull-left"><img src="images/cp6.jpg" alt=""/></a>
            </div>
        </div>
    </div>
    <!-- 底部-->
    <div class="footer">
        <ul>
            <li><a href="#"><img src="images/icon-home01.png" alt=""/></a></li>
            <li><a href="#"><img src="images/icon-me.png" alt=""/></a></li>
            <li><a href="#"><img src="images/icon-cart.png" alt=""/></a></li>
            <li><a href="#"><img src="images/icon-catergry.png" alt=""/></a></li>
        </ul>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>